﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cupcake Premium Admin Template</title>
    <link rel="stylesheet" type="text/css" href="style/reset.css" />
    <link rel="stylesheet" type="text/css" href="style/root.css" />
    <link rel="stylesheet" type="text/css" href="style/grid.css" />
    <link rel="stylesheet" type="text/css" href="style/typography.css" />
    <link rel="stylesheet" type="text/css" href="style/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style/jquery-plugin-base.css" />
    <!--[if IE 7]>	  <link rel="stylesheet" type="text/css" href="style/ie7-style.css" />	<![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-settings.js"></script>
    <script type="text/javascript" src="js/toogle.js"></script>
    <script type="text/javascript" src="js/jquery.tipsy.js"></script>
    <script type="text/javascript" src="js/jquery.uniform.min.js"></script>
    <script type="text/javascript" src="js/jquery.wysiwyg.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="js/raphael.js"></script>
    <script type="text/javascript" src="js/analytics.js"></script>
    <script type="text/javascript" src="js/popup.js"></script>
    <script type="text/javascript" src="js/fullcalendar.min.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.ui.slider.js"></script>
    <script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
    <script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <style>
        #stats
        {
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- START HEADER -->
        <div id="header">
            <!-- logo -->
            <div class="logo">
                <a href="index.html">
                    <img src="img/logo.png" width="112" height="35" alt="logo" /></a>
            </div>
            <!-- notifications -->
            <div id="notifications">
                <a href="index.html" class="qbutton-left">
                    <img src="img/icons/header/dashboard.png" width="16" height="15" alt="dashboard" /></a>
                <a href="#" class="qbutton-normal tips">
                    <img src="img/icons/header/message.png" width="19" height="13" alt="message" />
                    <span class="qballon">23</span> </a><a href="#" class="qbutton-right">
                        <img src="img/icons/header/support.png" width="19" height="13" alt="support" />
                        <span class="qballon">8</span> </a>
                <div class="clear">
                </div>
            </div>
            <!-- quick menu -->
            <div id="quickmenu">
                <a href="#" class="qbutton-left tips" title="Add a new post">
                    <img src="img/icons/header/newpost.png" width="18" height="14" alt="new post" /></a>
                <a id="open-stats" href="#" class="qbutton-right tips" title="Statistics">
                    <img src="img/icons/header/graph.png" width="17" height="15" alt="graph" /></a>
                <div class="clear">
                </div>
            </div>
            <!-- profile box -->
            <div id="profilebox">
                <a href="#" class="display">
                    <img src="img/simple-profile-img.jpg" width="33" height="33" alt="profile" />
                    <b>Logged in as</b> <span>Administrator</span> </a>
                <div class="profilemenu">
                    <ul>
                        <li><a href="#">Account Settings</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div>
            </div>
            <div class="clear">
            </div>
        </div>
        <!-- END HEADER -->
        <!-- START MAIN -->
        <div id="main">
            <!-- START SIDEBAR -->
            <div id="sidebar">
                <!-- start searchbox -->
                <div id="searchbox">
                    <div class="in">
                        <form id="form1" name="form1" method="post" action="">
                        <input name="textfield" type="text" class="input" id="textfield" onfocus="$(this).attr('class','input-hover')"
                            onblur="$(this).attr('class','input')" />
                        </form>
                    </div>
                </div>
                <!-- end searchbox -->
                <!-- start sidemenu -->
                <div id="sidemenu">
                    <ul>
                        <li><a href="index.html">
                            <img src="img/icons/sidemenu/laptop.png" width="16" height="16" alt="icon" />Dashboard</a></li>
                        <li class="active"><a href="form-elements.html">
                            <img src="img/icons/sidemenu/copy.png" width="16" height="16" alt="icon" />Form
                            Elements</a></li>
                        <li><a href="table-chart.html">
                            <img src="img/icons/sidemenu/user.png" width="16" height="16" alt="icon" />Table
                            &amp; Chart</a></li>
                        <li><a href="interface-elements.html">
                            <img src="img/icons/sidemenu/lock.png" width="16" height="16" alt="icon" />Interface
                            Elements</a></li>
                        <li><a href="typography.html">
                            <img src="img/icons/sidemenu/file_edit.png" width="16" height="16" alt="icon" />Typography
                        </a></li>
                        <li><a href="gallery.html">
                            <img src="img/icons/sidemenu/image.png" width="16" height="16" alt="icon" />Gallery
                            &amp; Media <span class="ballon">9</span> </a></li>
                        <li><a href="widgets.html">
                            <img src="img/icons/sidemenu/star.png" width="16" height="16" alt="icon" />Widgets</a></li>
                        <!-- start submenu with icon -->
                        <li class="subtitle"><a class="action tips-right" href="#" title="Submenu with icon">
                            <img src="img/icons/sidemenu/mail.png" width="16" height="16" alt="icon" />Submenu<img
                                src="img/arrow-down.png" width="7" height="4" alt="arrow" class="arrow" /></a>
                            <ul class="submenu">
                                <li><a href="#">
                                    <img src="img/icons/sidemenu/magnify.png" width="16" height="16" alt="icon" />Search
                                    File</a></li>
                                <li><a href="#">
                                    <img src="img/icons/sidemenu/print.png" width="16" height="16" alt="icon" />New
                                    Files <span class="ballon">693</span> </a></li>
                                <li><a href="#">
                                    <img src="img/icons/sidemenu/trash.png" width="16" height="16" alt="icon" />Others
                                    <span class="ballon">4</span> </a></li>
                            </ul>
                        </li>
                        <!-- end submenu with icon -->
                        <li><a href="error-pages.html">
                            <img src="img/icons/sidemenu/comment.png" width="16" height="16" alt="icon" />Error
                            Pages</a></li>
                        <li><a href="buttons-icons.html">
                            <img src="img/icons/sidemenu/arrow_down.png" width="16" height="16" alt="icon" />Button
                            &amp; Icons</a></li>
                        <li><a href="grid-styles.html">
                            <img src="img/icons/sidemenu/file.png" width="16" height="16" alt="icon" />Grid
                            Styles <span class="ballon">67</span> </a></li>
                        <li><a href="alert-dialog-boxes.html">
                            <img src="img/icons/sidemenu/attach.png" width="16" height="16" alt="icon" />Alert
                            &amp; Dialog Boxes</a></li>
                        <li><a href="calendar.html">
                            <img src="img/icons/sidemenu/calendar.png" width="16" height="16" alt="icon" />Calendar</a></li>
                        <!-- start submenu without icon -->
                        <li class="subtitle"><a class="action" href="#">
                            <img src="img/icons/sidemenu/download.png" width="16" height="16" alt="icon" />Submenu
                            Text<img src="img/arrow-down.png" width="7" height="4" alt="arrow" class="arrow" />
                        </a>
                            <ul class="submenu">
                                <li><a href="#">Search File</a></li>
                                <li><a href="#">New Files <span class="ballon">693</span> </a></li>
                                <li><a href="#">Others <span class="ballon">4</span> </a></li>
                            </ul>
                        </li>
                        <!-- end submenu without icon -->
                    </ul>
                </div>
                <!-- end sidemenu -->
            </div>
            <!-- END SIDEBAR -->
            <!-- START PAGE -->
            <div id="page">
                <!-- start stats -->
                <div id="stats">
                    <!-- use it up/down on <b> tag for different colors -->
                    <div class="column">
                        <b>$326.45</b> Earnings of today</div>
                    <div class="column">
                        <b>$96.25</b> Earnings of last hour</div>
                    <div class="column">
                        <b>23.695</b> Total Sales</div>
                    <div class="column">
                        <b class="down">46.230</b> Active Comments</div>
                    <!-- this is last column -->
                    <div class="column last">
                        <b class="up">$3.928</b> every per hours</div>
                    <a href="#" title="Close Stats" class="close tips">close</a>
                    <img src="img/icons/mini/stats-arrow-top.png" width="17" height="9" alt="arrow" class="arrow" />
                </div>
                <!-- end stats -->
                <!-- start page title -->
                <div class="page-title">
                    <div class="in">
                        <div class="titlebar">
                            <h2>
                                FORM ELEMENTS</h2>
                            <p>
                                Form elements styles</p>
                        </div>
                        <div class="shortcuts-icons">
                            <a class="shortcut tips" href="#" title="Refresh">
                                <img src="img/icons/shortcut/refresh.png" width="25" height="25" alt="icon" /></a>
                            <a class="shortcut tips" href="#" title="Dashboard">
                                <img src="img/icons/shortcut/dashboard.png" width="25" height="25" alt="icon" /></a>
                            <a class="shortcut tips" href="#" title="Add New Item">
                                <img src="img/icons/shortcut/plus.png" width="25" height="25" alt="icon" /></a>
                            <a class="shortcut tips" href="#" title="Search on This Page">
                                <img src="img/icons/shortcut/search.png" width="25" height="25" alt="icon" /></a>
                            <a class="shortcut tips" href="#" title="Information for this page">
                                <img src="img/icons/shortcut/question.png" width="25" height="25" alt="icon" /></a>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <!-- START CONTENT -->
                <div class="content">
                    <!-- START SIMPLE FORM -->
                    <div class="simplebox grid740">
                        <div class="titleh">
                            <h3>
                                Simple Form</h3>
                            <div class="shortcuts-icons">
                                <a class="shortcut tips" href="#" title="This is Simple Form">
                                    <img src="img/icons/shortcut/question.png" width="25" height="25" alt="icon" /></a>
                            </div>
                        </div>
                        <div class="body">
                            <form id="form2" name="form2" method="post" action="">
                            <div class="st-form-line">
                                <span class="st-labeltext">Your Name</span>
                                <input name="textfield2" type="text" class="st-forminput" id="textfield1" style="width: 510px"
                                    value="" />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Account ID</span>
                                <input name="textfield2" type="text" class="st-forminput tips-right" id="textfield2"
                                    style="width: 510px" value="" title="Your Apps Account ID" />
                                <div class="clear">
                                </div>
                            </div>
                            <!-- This is uniform selectbox - view this item class -->
                            <div class="st-form-line">
                                <span class="st-labeltext">Account Type</span>
                                <select name="select" id="select1" class="uniform">
                                    <option>English</option>
                                    <option>French</option>
                                    <option>Chinese</option>
                                    <option>Rusian</option>
                                </select>
                                <div class="clear">
                                </div>
                            </div>
                            <!-- This is uniform radio - view this item class -->
                            <div class="st-form-line">
                                <span class="st-labeltext">Gender</span>
                                <label class="margin-right10">
                                    <input type="radio" name="radio" class="uniform" />
                                    Select 1</label>
                                <label class="margin-right10">
                                    <input type="radio" name="radio" class="uniform" />
                                    Select 2</label>
                                <div class="clear">
                                </div>
                            </div>
                            <!-- This is uniform checkbox - view this item class -->
                            <div class="st-form-line">
                                <span class="st-labeltext">Language</span>
                                <label class="margin-right10">
                                    <input type="checkbox" name="checkbox" id="checkbox1" class="uniform" />
                                    Checkbox</label>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Password</span>
                                <input name="textfield2" type="text" class="st-error-input" id="textfield96" style="width: 300px"
                                    value="error input" />
                                <span class="st-form-error">* oppss, we got an error over here</span>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Phone Number</span>
                                <input name="textfield2" type="text" class="st-success-input" id="textfield97" style="width: 300px"
                                    value="success input" />
                                <span class="st-form-success">* you are doing it right !</span>
                                <div class="clear">
                                </div>
                            </div>
                            <!-- This is uniform upload input -->
                            <div class="st-form-line">
                                <span class="st-labeltext">Upload Your File</span>
                                <input type="file" class="uniform" />
                                <div class="clear">
                                </div>
                            </div>
                            <!-- This is uniform upload input -->
                            <div class="st-form-line">
                                <span class="st-labeltext">Date Picker</span>
                                <!-- start default date picker -->
                                <script type="text/javascript">
                                    $(function () {
                                        $("#datepicker").datepicker();
                                    });
                                </script>
                                <input type="text" id="datepicker" class="datepicker-input" style="width: 180px;" />
                                <!-- end default date picker -->
                                <div class="clear">
                                </div>
                            </div>
                            <!-- This is uniform upload input -->
                            <div class="st-form-line">
                                <span class="st-labeltext">Plugin ?</span>
                                <!-- start checkbox iphone style -->
                                <p class="field switch">
                                    <label for="radio1" id="radio21" class="cb-enable selected">
                                        <span>Enable</span></label>
                                    <label for="radio2" id="radio22" class="cb-disable">
                                        <span>Disable</span></label>
                                </p>
                                <!-- end checkbox iphone style -->
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Message</span>
                                <textarea name="textfield2" class="st-forminput" id="textfield11" style="width: 510px"
                                    rows="3" cols="47"></textarea>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="button-box">
                                <input type="submit" name="button" id="button" value="Submit" class="st-button" />
                                <input type="reset" name="button" id="button2" value="Reset" class="st-clear" />
                            </div>
                            </form>
                        </div>
                    </div>
                    <!-- END SIMPLE FORM -->
                    <!-- START jWYSIWYG TEXT EDITOR -->
                    <div class="simplebox grid740">
                        <div class="titleh">
                            <h3>
                                jWYSIWYG Text Editor</h3>
                            <div class="shortcuts-icons">
                                <a class="shortcut tips" href="#" title="Very Usable jWYSIWYG Text Editor ">
                                    <img src="img/icons/shortcut/question.png" width="25" height="25" alt="icon" /></a>
                            </div>
                        </div>
                        <div class="body">
                            <textarea name="wysiwyg" id="wysiwyg" class="st-forminput" rows="5" cols="47" style="width: 96.5%;"></textarea>
                        </div>
                    </div>
                    <!-- END jWYSIWYG TEXT EDITOR -->
                    <!-- START FORM ELEMENT STYLES -->
                    <div class="simplebox grid740">
                        <div class="titleh">
                            <h3>
                                Form Element Styles</h3>
                            <div class="shortcuts-icons">
                                <a class="shortcut tips" href="#" title="This is Form Element Styles">
                                    <img src="img/icons/shortcut/question.png" width="25" height="25" alt="icon" /></a>
                            </div>
                        </div>
                        <div class="body">
                            <form id="form3" name="form2" method="post" action="">
                            <div class="st-form-line">
                                <span class="st-labeltext">Small Input</span>
                                <input name="textfield2" type="text" class="st-forminput" id="textfield12" style="width: 100px"
                                    value="style=&quot;width:100px&quot; " />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Normal Input</span>
                                <input name="textfield2" type="text" class="st-forminput" id="textfield13" style="width: 300px"
                                    value="style=&quot;width:300px&quot; " />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Big Input</span>
                                <input name="textfield2" type="text" class="st-forminput" id="textfield14" style="width: 510px"
                                    value="style=&quot;width:510px&quot; " />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Disable Input</span>
                                <input name="textfield2" type="text" disabled="disabled" class="st-forminput  st-disable"
                                    id="textfield15" style="width: 200px" value="Disabled field" />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">With max lenght</span>
                                <input name="textfield2" type="text" class="st-forminput" id="textfield16" style="width: 400px"
                                    value="max 30 characters" maxlength="30" />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">With Tooltip</span>
                                <input name="textfield2" type="text" class="st-forminput tips-right" id="textfield17"
                                    style="width: 400px" maxlength="30" title="this is your title" />
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Textarea Small</span>
                                <textarea name="textfield2" class="st-forminput" id="textfield18" style="width: 100px"
                                    rows="3" cols="47">style="width:100px" </textarea>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Textarea Normal</span>
                                <textarea name="textfield2" class="st-forminput" id="textfield19" style="width: 300px"
                                    rows="3" cols="47">style="width:300px" </textarea>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Textarea Big</span>
                                <textarea name="textfield2" class="st-forminput" id="textfield20" style="width: 510px"
                                    rows="3" cols="47">style="width:510px" </textarea>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Disable Textarea</span>
                                <textarea name="textfield2" disabled="disabled" class="st-forminput st-disable" id="textfield21"
                                    style="width: 510px" rows="3" cols="47">Disable Textarea</textarea>
                                <div class="clear">
                                </div>
                            </div>
                            <div class="st-form-line">
                                <span class="st-labeltext">Disable With Tooltip</span>
                                <textarea name="textfield2" class="st-forminput tips-right" id="textfield22" style="width: 510px"
                                    title="another awesome option" rows="3" cols="47"></textarea>
                                <div class="clear">
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                    <!-- END FORM ELEMENT STYLES -->
                </div>
                <!-- END CONTENT -->
            </div>
            <!-- END PAGE -->
            <div class="clear">
            </div>
        </div>
        <!-- END MAIN -->
        <!-- START FOOTER -->
        <div id="footer">
            <div class="left-column">
                � Copyright 2012 - All rights reserved.</div>
            <div class="right-column">
                Cupcake theme by <a href="http://themeforest.net/user/egemem" target="_blank">egemem</a></div>
        </div>
        <!-- END FOOTER -->
    </div>
</body>
</html>
